<template>
  <div class="hotel-main">
    <div>
      <div class="d-flex justify-content" style="padding: 10px;">
        <div class="ml-10 mr-10 d-flex align-items-center">
          <p class="mr-5" style="width: 70px;font-size: 14px">会员名:</p>
          <el-input
              placeholder="请输入会员名"
              prefix-icon="el-icon-search"
              v-model="name">
          </el-input>
        </div>
        <div class="ml-10 mr-10 d-flex align-items-center">
          <p class="mr-5" style="width: 70px;font-size: 14px">手机号:</p>
          <el-input
              placeholder="请输入手机号"
              prefix-icon="el-icon-search"
              v-model="mobile">
          </el-input>
        </div>
        <el-button @click="getUserList" size="small">查询</el-button>
      </div>
      <div class="d-flex justify-content-end" style="padding: 10px;">
        <el-button type="primary" style="width: 100px;" @click="addUser">添加</el-button>
      </div>

      <el-table
          stripe
          size="small "
          :data="hotelData"
          style="width: 100%"
          border>
        <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="会员名"
            width="200">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
            :formatter="genderFormatter">
        </el-table-column>
        <el-table-column
            prop="mobile"
            label="电话">
        </el-table-column>
        <el-table-column
            prop="userMoney"
            label="余额">
        </el-table-column>
        <el-table-column
            prop="frozenMoney"
            label="累计消费">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间">
        </el-table-column>
        <el-table-column
            label="消费"
            width="240"
            align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"  type="primary"
                @click="addMember(scope.$index, scope.row)">充值
            </el-button>
            <!-- <el-button
                size="mini"
                type="primary"
                @click="ReduceMember(scope.$index, scope.row)">消费
            </el-button> -->
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="240"
            align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="MoneyType(scope.$index, scope.row)">金额记录
            </el-button>
            <el-button
                size="mini"
                type="primary"
                @click="handleModify(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <el-pagination
        class="mb-15"
        background
        @current-change="handleCurrentChange"
        @prev-click="prevPage"
        @next-click="nextPage"
        layout="prev, pager, next"
        :total="pageNum">
    </el-pagination>


    <!-- 弹出框 -->
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="570px">
      <div class="content">
        <div class="d-flex align-items-center mb-15">
          <p class="w-100 text-left">会员名:</p>
          <el-input
              style="width: 350px;"
              placeholder="请输入会员名"
              v-model="form.name"
              :disabled="userValue == 'check'"
              clearable>
          </el-input>
        </div>
        <div class="d-flex align-items-center mb-15">
          <p class="w-100 text-left">性别:</p>
          <el-input
           type="number"
              style="width: 350px;"
              placeholder="0 表示男 1表示女"
              v-model="form.gender"
              :disabled="userValue == 'check'"
              clearable>
          </el-input>
        </div>
        <div class="d-flex align-items-center mb-15">
          <p class="w-100 text-left">手机号:</p>
          <el-input
              style="width: 350px;"
              placeholder="请输入手机号"
              v-model="form.mobile"
              :disabled="userValue == 'check'"
              clearable>
          </el-input>
        </div>
        <!-- <div class="d-flex align-items-center">
          <p class="w-100 text-left">余额:</p>
          <el-input
              type="number"
              style="width: 350px;"
              placeholder="请输入余额"
              v-model="form.userMoney"
              :disabled="userValue == 'check'"
              clearable>
          </el-input>
        </div> -->

      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm" v-if="userValue != 'check'">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="dialogFormVisible"  width="500px">
      <div class="content">
        <div class="d-flex align-items-center">
          <p class="w-100 text-left"> 充值金额: </p>
          <el-input
              type="number"
              style="width: 350px;"
              placeholder="请输入充值金额"
              v-model="form.zhuMoney"
              :disabled="userValue == 'check'"
              clearable>
          </el-input>
        </div>
        <br>
        <div class="d-flex align-items-center">
          <p class="w-100 text-left">赠送金额:</p>
          <el-input
              type="number"
              style="width: 350px;"
              placeholder="请输入赠送金额"
              v-model="form.GiveMoney"
              :disabled="userValue == 'check'"
              clearable>
          </el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
   </el-dialog>

  </div>

</template>

<script>
import {get, post} from "../utils/request";

export default {
  name: "HotelManage",
  data() {
    return {
      dialogFormVisible: false,
      name: undefined,
      mobile: undefined,
      deptList: undefined,
      deptMap: {},
      address: undefined,
      hotelData: [],
      title: '',
      zhuTitle:'',
      zhuDetails:'',
      page: '',
      departData: '',
      hotelName: '',
      hotelAddress: '',
      userValue: '',
      hotelId: '',
      deptId: '',
      parking: '',
      pageNum: 0,
      dialogVisible: false,
      userList: [],
      tempPassword: undefined,
      form: {
        id: '',
        name: '',
        mobile: '',
        gender: undefined,
        userMoney: undefined,
        roomTypeName: undefined,
        zhuMoney: undefined,
        GiveMoney:undefined
      }
    }
  },
  filters: {
    mapFormat(val, map) {
      console.log(val)
      console.log(map)
      return map[val]
    }
  },
  methods: {
    genderFormatter(row) {
      return row.gender === 0 ? '男' : '女';
    },
    //获取用户列表
    getUserList() {
      let data = {
        page: {
          page: 1,
          size: 10
        },
        name: this.name,
        mobile: this.mobile
      }
      let dept = {}
      //获取用户列表
      this.userListRequest(data)
    },

    //获取用户列表请求
    userListRequest(data) {
      post('/api/member/page', data)
          .then(res => {
            console.log(res);
            this.hotelData = res.data.data.records
            this.pageNum = res.data.data.total
          })
          .catch(err => {
            console.log(err);
          })
    },

    //删除用户方法
    handleDelete(index, row) {
      get('/api/member/delete/' + row.id)
          .then(res => {
            console.log(res);
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            });
            setTimeout(() => {
              this.$router.go(0)
            }, 1000)
          })
          .catch(err => {
            console.log(err);
          })
    },

    getDeptList() {
      let data = {
        page: {
          page: 1,
          size: 9999999
        },
      }
      post("/api/dept/list", data).then(res => {
        this.deptList = this.getTreeData(res.data.data)
        // console.log(this.deptList)
      })
      post("/api/dept/page", data).then(res => {
        let list = res.data.data.records
        // console.log("list===",list)
        list.forEach(row => {
          // console.log("listitem===",row)
          this.deptMap[row.id] = row.name
        })
        // console.log("deptmap===",this.deptMap)
      })

    },

    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },

    cascaderClick(nodeData) {
      this.addrCode = nodeData.id;
      this.$refs.cascader.checkedValue = nodeData.id;
      this.$refs.cascader.computePresentText();
      this.$refs.cascader.toggleDropDownVisible(false);
      this.$message({
        message: '已选择：' + nodeData.name,
        type: 'success',
        duration: 1000
      });
    },

    //增加用户方法
    addUser() {
      this.form = {}
      this.dialogVisible = true
      this.title = '添加用户'
      this.userValue = 'add'
      this.getUserList()
    },

    handleCheck(index, row) {
      this.userValue = 'check'
      this.dialogVisible = true
      this.title = '查看用户信息'
      this.form = row
    },
    MoneyType(index, row) {
      console.log(index);
      console.log(row);
      this.$router.push({
        path:"MoneyType",
        name:"MoneyType",
        params:{
            id:row.id,
        }
      })
    },

    //修改用户信息
    handleModify(index, row) {
      console.log(index);
      console.log(row);
      this.form = row
      this.dialogVisible = true
      this.title = '修改会员信息'
      this.userValue = 'modify'
    },
     //修改金额
     addMember(index, row) {
      console.log(index);
      console.log(row);
      this.form = row
      this.dialogFormVisible  = true
      this.title = '金额操作'
      this.zhuTitle="充值金额"
      this.zhuDetails="请输入充值金额"
      this.userValue = 'addMember'
    },
      //修改金额
      ReduceMember(index, row) {
      console.log(index);
      console.log(row);
      this.form = row
      this.dialogFormVisible  = true
      this.title = '金额操作'
      this.zhuTitle="消费金额"
      this.zhuDetails="请输入消费金额"
      this.userValue = 'ReduceMember'
    },
    //
    confirm() {
      let value = this.userValue
      let data = {
        id: undefined,
        name: this.form.name,
        gender: this.form.gender,
        userMoney: this.form.userMoney,
        mobile: this.form.mobile,
        zhuMoney:this.form.zhuMoney,
        giveMoney:this.form.GiveMoney
      }
      if (value == 'add') {
        this.userRequest(value, data)
      } else if (value == 'modify') {
        data.id = this.form.id
        this.userRequest(value, data)
      } else if (value == 'addMember') {
        data.id = this.form.id
        this.userRequest(value, data)
      }else if (value == 'ReduceMember') {
        data.id = this.form.id
        this.userRequest(value, data)
      }
    },

    //请求方法
    userRequest(url, data) {
      post('/api/member/' + url, data)
          .then(res => {
            console.log(res);
            if (res.data.code === "200") {
              this.$message({
                message: '操作成功！',
                type: 'success',
                duration: 1000
              });
              this.$router.go(0);
            } else {
              this.$message({
                message: res.data.msg,
                type: 'warning',
                duration: 1000
              });

            }
          })
          .catch(err => {
            console.log(err);
          })
    },

    //选择页码
    handleCurrentChange(num) {
      let data = {
        page: {
          page: num,
          size: 10
        },
        name: this.name,
        mobile: this.mobile
      }
      this.userListRequest(data)
    },

    //上一页
    prevPage(num) {
      let data = {
        page: {
          page: num,
          size: 10
        },
        name: this.name,
        mobile: this.mobile
      }
      this.userListRequest(data)

    },

    //下一页
    nextPage(num) {
      let data = {
        page: {
          page: num,
          size: 10
        },
        name: this.name,
        mobile: this.mobile
      }
      this.userListRequest(data)
    },


  },
  mounted() {

    this.getUserList()
  },

}
</script>

<style scoped>
.hotel-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  box-shadow: 0px 5px 30px 0px rgba(22, 115, 255, 0.1);
}
</style>
